<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>电影详细</title>
    <%@ include file="../comm.jsp" %>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/toubu.css"/>
    <link href="${pageContext.request.contextPath}/css/style.css" type="text/css" rel="stylesheet" media="all">
</head>
<%--时间器--%>
<script type="text/javascript">
    setInterval(function() {
        //时间
        var mydate = new Date();
        var year = mydate.getFullYear()
        var month = mydate.getMonth() + 1;
        var data = mydate.getDate();
        var h = mydate.getHours(); //获取当前小时数(0-23)
        var m = mydate.getMinutes(); //获取当前分钟数(0-59)
        var s = mydate.getSeconds(); //获取当前秒数(0-59)
        var cg = year + "/" + month + "/" + data + "     " + h + ":" + m + ":" + s;
        $("#time").html(cg)

    }, 1)
</script>
<script>
    $(function(){
        //退出
        $("#tui").click(function() {
            $.ajax({
                type:"get",
                url:"exit",
                success:function(data){
                    window.location.reload();
                }
            });
        })
        //查询
        $("#but1").click(function () {
            var search=$("#search").val()
            window.location.href="homeFilmSearch?filmName="+search;
        })
        //登录
        $("#login").on("click","#toLogin",function(){
            $.ajax({
                type:"post",
                url:"login",
                data:{
                    uaccount:$("#userName").val(),
                    upass:$("#userPassword").val()
                },
                success:function(data){
                    if(data=='home') {
                        window.location.reload();
                    }else if(data=='admin' || data=='personnel' ){
                        window.location.href=data.toString();
                    }
                    else{
                        alert("登录失败");
                    }
                },
                error:function () {
                    alert("服务器请求失效")
                }
            });
        })
        //注册
        $("#but66").click(function () {
            var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
            var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if ($("#userPassword2").val()==$("#userPassword3").val()){
                if (ePattern.test($("#emli").val())){
                    if (uPattern.test($("#phone").val())){
                        $.ajax({
                            type:"post",
                            url:"register",
                            data:{
                                uname:$("#userName1").val(),
                                uaccount:$("#account").val(),
                                upass:$("#userPassword2").val(),
                                mail:$("#emli").val(),
                                phonenum:$("#phone").val()
                            },
                            success:function(data){
                                if(data>0){
                                    alert("注册成功")
                                    window.location.reload();
                                }else{
                                    alert("注册失败")
                                }
                            },
                            error:function () {
                                alert("服务器请求失效")
                            }
                        });
                    } else{
                        alert("手机号输入不正确")
                    }
                } else {
                    alert("邮箱输入不正确")
                }
            } else{
                alert("密码不一致")
            }
        })
    })
</script>
<style type="text/css">
    body {
        background: #2E323B;
    }
    .detailed{
        background: white;
        border-radius:20px;
        padding-bottom: 50px;
    }
    #register table tr {
        height: 50px;
    }

</style>
<body>
<div class="container">
    <div class="row" id="tou">
        <nav class="navbar navbar-default col-lg-12" style="text-align: center;">
            <div class="logo navbar-header" style="width: 90px; height: 51px; padding: 8px;">
                <a href="${pageContext.request.contextPath}"><img src="${pageContext.request.contextPath}/img/logo.png" style="width: 88px;" height="50.59px" alt="" /></a>
            </div>
            <div class="container-fluid" style="margin-left: 120px; padding: 10px; margin: 0px;">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul id="ul" class="nav navbar-nav" style="margin-left: 20px;">
                        <li>
                            <a href="${pageContext.request.contextPath}">首页</a>
                        </li>
                        <li>
                            <a href="moreFilmPage">电影</a>
                        </li>
                        <li>
                            <a href="we">影城介绍</a>
                        </li>
                    </ul>
                    <div class="navbar-nav container-fluid" style="position: relative;">
                        <div style="margin-left:30px;" style="display: block;">
                            <input id="search" type="search" placeholder="搜索">
                            <span id="but1" class="glyphicon glyphicon-search"></span>
                            <font id="time">#</font>
                        </div>

                    </div>

                    <div style="float: right;" id="islog">
                        <c:if test="${user!=null}">
                            <a href="personal"><img  src="${pageContext.request.contextPath}/img/${user.uimg}" class="img-circle" style="width: 40px; margin-right: 10px; height: 40px"></a>
                            <a href="personal">${user.uname}</a>&nbsp;&nbsp;
                            <button class="btn btn-danger" data-toggle="modal" data-target="#myModal" style="margin-left: 20px;"><span class=" glyphicon glyphicon-off" style="font-size: 14px; margin-right: 5px;"></span><span >退出</span></button>
                        </c:if>
                        <c:if test="${user==null}">
                            <img data-toggle='modal' data-target='#login' id="img" src="${pageContext.request.contextPath}/img/ht.jpg" class="img-circle" style="width: 40px; margin-right: 10px; height: 40px">
                            <a data-toggle='modal' data-target='#login'>登录</a>&nbsp;&nbsp;
                        </c:if>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</div>
<div style="margin: 30px;">
    <!-- 是否退出登录 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" style="text-align: center;">是否退出登录</h4>
                </div>
                <div class="modal-footer" style="text-align: center;">
                    <button id="tui" type="button" class="btn btn-danger">退出登录</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>
<div class="container detailed" >
    <div class="container" style="margin-top: 20px;">
        <div><strong id="biaoti" style="font-size: 26px;">上映时间：${film.play_time}</strong></div>
        <img style="float: left; display: block; height: 300px; width: 250px; margin-right: 20px;" src="${pageContext.request.contextPath}/img/${film.film_img}" />
        <div>
            <div style="padding-top: 15px;line-height: 25px;">
                <p>导演: <font id="daoyan">${film.director}</font></p>
                <p>主演: <font id="zhuyan">${film.stars}</font></p>
                <p>类型: <font id="leixing">${film.filmTypeName}</font></p>
                <p>语言: <font id="yuyan">${film.languageName}</font></p>
                <p>国家: <font id="guojia">${film.countryName}</font></p>
                <p>首映时间: <font id="shangying">${film.play_time}</font></p>
                <p>片长: <font id="pianchang">${film.length}分钟</font></p>
                <p>影片描述: <font id="miaosu">${film.synopsis}</font></p>
            </div>
            <form onsubmit="" class="layui-form" id="selectForm">
                <input type="hidden" id="filmId" value="${film.film_id}">
                <%--地区下拉列表--%>
                <div class="layui-form-item" style="padding-top:20px;">
                    <label class="layui-form-label" style="width: 150px;">选择影院位置：</label>
                    <div class="layui-input-inline">
                        <select name="diqu" id="diqu" lay-filter="diqu">
                            <option value="">请选择市</option>
                            <c:forEach var="area" items="${requestScope.film.areaList}">
                                <option value="${area.aid}" >${area.aname}</option>
                            </c:forEach>
                        </select>
                    </div>
                    <div class="layui-input-inline" >
                        <select name="diqu2" id="diqu2" lay-filter="diqu2">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" >
                        <select name="diqu3" id="diqu3" lay-filter="diqu3">
                            <option value="">请选影院</option>
                        </select>
                    </div>
                </div>
                <strong>
                    <a href="javascript:toGou();"><font class ="btn btn-danger glyphicon glyphicon-shopping-cart">购票 </font></a>
                </strong>
            </form>
        </div>
    </div>
</div>
<!--登录模态框 -->
<div class="modal fade" id="login" style="margin-top: 200px"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" >用户登录</h4>
            </div>
            <div class="text-center" style="margin-top: 15px; text-align: center; margin-bottom: 15px;">
                <table align="center" id="table">
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">用户名</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" style="display: inherit;width: 200px;" id="userName" placeholder="请输入用户名">
                        </td>
                    </tr>
                    <tr height="50px">
                        <td align="center" width="80px">
                            <label  class="control-label">密码</label>
                        </td>
                        <td>
                            <input type="password" class="form-control" style="display: inherit;width: 200px;" id="userPassword" placeholder="请输入密码">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer" style="position:relative;height: 60px; line-height: 60px;">
                <button style="position: absolute; left: 42%;" type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                <button id="toLogin" style="position: absolute; left: 52%;" type="button" class="btn btn-success" data-dismiss="modal">登录</button>
                <a style="position: absolute; right: 10%;line-height:50px;" data-dismiss="modal" data-toggle='modal' data-target='#register'>注册</a>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--注册模态框 -->
<div class="modal fade" id="register" style="margin-top: 200px"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">用户注册</h4>
            </div>
            <div class="text-center" style="margin-top: 15px; text-align: center; margin-bottom: 15px;">
                <table align="center" id="table2">
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">昵称</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" style="display: inherit;width: 200px;" id="userName1" placeholder="请输入用户名">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">用户名</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" style="display: inherit;width: 200px;" id="account" placeholder="请输入账号">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label class="control-label">密码</label>
                        </td>
                        <td>
                            <input type="password" class="form-control" style="display: inherit;width: 200px;" id="userPassword2" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">确认密码</label>
                        </td>
                        <td>
                            <input type="password" class="form-control" style="display: inherit;width: 200px;" id="userPassword3" placeholder="确认密码">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">邮箱</label>
                        </td>
                        <td>
                            <input type="email" class="form-control" style="display: inherit;width: 200px;" id="emli" placeholder="邮箱">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">手机号</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" style="display: inherit;width: 200px;" id="phone" placeholder="手机号">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer" style="position:relative;height: 60px; line-height: 60px;">
                <button style="position: absolute; left: 42%;" type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                <button style="position: absolute; left: 52%;" type="button" class="btn btn-success" id="but66">注册</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<script>
    var $ ;
    layui.use(['jquery','laypage','form'], function() {
        $ = layui.$;
        var laypage = layui.laypage
            , form = layui.form;
        //二级下拉列表，地区
        form.on('select(diqu)', function (data) {
            var value = data.value;
            $.ajax({
                url:"area2",
                data:{pid:value},
                dataType:"json",
                success:function(resultData){
                    if(resultData.code == 0){
                        //清空赋值
                        $("#diqu2").empty();
                        $("#diqu2").append(new Option("请选择地区", ""));
                        $.each(resultData.data, function(index, item) {
                            //赋值
                            $('#diqu2')
                                .append(new Option(item.aname, item.aid));
                        });
                    }else{
                        $("#diqu2").append(new Option("暂无数据", ""));
                    }
                    layui.form.render("select");
                }
            })
            layui.form.render("select");
        });
        //三级选择下拉列表，影院
        form.on('select(diqu2)', function (data) {
            var value = data.value;
            var filmId = $('#filmId').val();
            $.ajax({
                url:"cinema3",
                data:{
                    aid:value,
                    filmId:filmId
                },
                dataType:"json",
                success:function(resultData){
                    if(resultData.code == 0){
                        //清空赋值
                        $("#diqu3").empty();
                        $("#diqu3").append(new Option("请选择影院", ""));
                        $.each(resultData.data, function(index, item) {
                            //赋值
                            $('#diqu3')
                                .append(new Option(item.cname, item.cid));
                        });
                    }else{
                        $("#diqu3").append(new Option("暂无数据", ""));
                    }
                    layui.form.render("select");
                }
            })
            layui.form.render("select");
        });
    });
    function toGou(){
        var cid = $('#diqu3').val();
        var filmId = $('#filmId').val();
        if(cid == null || cid == ""){
            layer.msg("请选择影院后购票",{icon: 4});
        }else {
            window.location.href="room?cid="+cid+"&filmId="+filmId;
        }
    }
</script>
</body>
</html>
